<template>
  <div class="charts-container">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <MiniChart title="放款金额" total="1,234" />
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <MiniChart title="借款申请数" total="1,234" />
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <MiniChart title="成功放款数" total="1,234" />
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="放款金额" total="$126,560">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <Trend flag="up" style="margin-right: 16px;">
              <span slot="term">周同比</span>
              12%
            </Trend>
            <Trend flag="down">
              <span slot="term">日环比</span>
              11%
            </Trend>
          </div>
          <template slot="footer">日均放款金额<span>$ 234.56</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="收款金额" :total="8846">
          <a-tooltip title="收款金额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">日均收款金额<span> {{ '1234' }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="逾期个数" :total="6560">
          <a-tooltip title="逾期个数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar />
          </div>
          <template slot="footer">逾期比率<span>60%</span></template>
        </chart-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  ChartCard,
  Trend,
  MiniProgress,
  MiniBar,
  MiniArea,
  MiniChart,
} from '@/components'

export default {
  components: {
    ChartCard,
    Trend,
    MiniProgress,
    MiniBar,
    MiniArea,
    MiniChart,
  },
}
</script>
